<template>
	<view class="my_container">
		<CustomNavbar :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_view">
				<image class="my_container_view_left" :src="userInfo.avatar"></image>
				<view class="my_container_view_center">
					<text v-if="userInfo.nickName">{{ userInfo.nickName }}</text>
					<text v-else @tap="handleLogin">登录/注册</text>
				</view>
				<view v-if="userInfo.nickName" class="my_container_view_right" @click="update">
					<image src="../../static/imags/Pencil_(铅笔).png"></image>
					<view>个人设置</view>
				</view>
			</view>
			<view class="my_container_title">
				<!-- <view class="briefInfo-title">简介：</view> -->
				<view class="briefInfo">
					<u-read-more v-if="userInfo.briefInfo" :toggle="true" showHeight='58'
						:shadowStyle='{backgroundImage:none}'>
						<rich-text style="color: #fff;" :nodes="userInfo.briefInfo"></rich-text>
					</u-read-more>
					<text v-else>暂无简介</text>
				</view>
				<!-- <view class="briefInfo">{{ userInfo.briefInfo ? userInfo.briefInfo : '暂无简介' }}</view> -->
				<!-- 				<image class="my_container_title_left" :src="userInfo.avatar"></image>
				<view class="my_container_title_center">
					{{userInfo.nickName}}
				</view>
				<view class="my_container_title_right">
					<view @click="gosgangjia">查看详情</view>
					<image @click="gosgangjia" src="../../static/imags/Down_(下).png"></image>
				</view> -->
			</view>
			<view class="my_container_fotter">
				<view class="my_container_fotter_head">
					<view @click="handleClick(0)" class="my_container_fotter_head_item">
						<view>{{ pubInfoUserInfo.pubInfoCount }}</view>
						<view>内容</view>
					</view>
					<view @click="handleClick(1)" class="my_container_fotter_head_item">
						<view>{{ pubInfoUserInfo.likeCount }}</view>
						<view>点赞</view>
						<view class="icon-new" v-if="isLikeNew">
							<image src="/static/images/new.svg" mode=""></image>
						</view>
					</view>
					<view @click="handleClick(2)" class="my_container_fotter_head_item">
						<view>{{ pubInfoUserInfo.fansCount }}</view>
						<view>粉丝</view>
						<view class="icon-new" v-if="isFansNew">
							<image src="/static/images/new.svg" mode=""></image>
						</view>
					</view>
					<view class="my_container_fotter_head_item">
						<view>{{ pubInfoUserInfo.watchCount }}</view>
						<view>浏览量</view>
					</view>
				</view>
				<view class="my_container_image">
					<view style="width: 700rpx">
						<view class="my_container_image_head">
							<image src="../../static/imags/Frame_21.png"></image>
							<view class="my_container_image_huiyuan">{{ pubInfoUserInfo.vipTypeName }}</view>
						</view>
						<view class="my_container_image_bottwn">
							您的会员有效期剩余{{ pubInfoUserInfo.vipExpireDays == undefined ? 0 : pubInfoUserInfo.vipExpireDays }}天
						</view>
					</view>
					<view style="width: 286rpx" @click="toVip()">
						<view class="my_container_image_button">去查看</view>
					</view>
				</view>
				<view class="my_container_item">
					<view class="my_container_item_body" v-for="(item, index) in dataList" :key="index"
						@click="toPage(item.name)">
						<image :src="item.url"></image>
						<view class="item-name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" :duration="400" :z-index="999" :opacity="0.5" @click="canle">
			<view class="show_pic">
				<view class="show_head">
					<image class="show_head_o" src="../../uni_modules/zhouWei-APPshare/static/icon_weixin.png"></image>
					<view class="show_head_t">
						<view>废纸管家-安夏</view>
						<view>15396802565</view>
					</view>
				</view>
				<image class="show_p" show-menu-by-longpress="true"
					src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/01/18/e0abffdb59e249ba9c5755fe99ea4b20.png">
				</image>
				<view class="show_footer">您在使用过程中有什么问题都可以联系您的专属管家</view>
			</view>
		</u-overlay>
		<!-- 中间加号按钮（浮动在原生 Tab 栏上方） -->
		<view class="center-btn" @click="handleAdd">
			<image src="../../static/images/wyfb.png" class="center-icon" />
		</view>
		<view class="center-btn1">
			<image src="../../static/images/zxkf.png" class="center-icon" />
			<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		</view>
	</view>
</template>
<script>
	import store from '../../store/index.js';
	import {
		mapState
	} from 'vuex'; // 关键导入
	import CustomNavbar from '@/components/CustomNavbar.vue';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbar,
		},
		data() {
			return {
				isLikeNew: false,
				isFansNew: false,
				show: false,
				curInd: 4,
				pageTitle: '个人中心',
				navbarStyle: {
					backgroundColor: '#1BE820',
					color: '#fff'
				},
				dataList: [{
					url: '../../static/imags/Frame_23.png',
					name: '我的供求'
				}, {
					url: '../../static/imags/Frame_24.png',
					name: '我的收藏'
				}, {
					url: '../../static/imags/Frame_25.png',
					name: '我的关注'
				}, {
					url: '../../static/imags/Frame_26.png',
					name: '专属服务管家'
				}, {
					url: '../../static/imags/Frame_27.png',
					name: '分享积分'
				}, {
					url: '../../static/imags/Frame_28.png',
					name: '订阅记录'
				}]
			};
		},
		onLoad() {
			uni.$on('updateStatus', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				this.getUserInfo();
			});
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShow() {
			this.getUserInfo();
		},
		computed: {
			// 映射vuex状态
			userInfo: {
				get() {
					return this.$store.state.userInfo;
				},
				set(value) {
					// 不需要实现，保持空即可
				}
			},
			pubInfoUserInfo: {
				get() {
					return this.$store.state.pubInfoUserInfo;
				},
				set(value) {
					// 不需要实现，保持空即可
				}
			}
			// pubInfoUserInfo() {
			// 	return this.$store.state.pubInfoUserInfo;
			// }
			// ...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			handleAdd() {
				if (!this.userInfo.userId) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
					return;
				}
				uni.navigateTo({
					url: '/page/add/add'
				});
			},
			//点击登录
			handleLogin() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			//跳转去我的点赞等
			handleClick(e) {
				console.log(this.userInfo, 55);
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if (e == 1) {
					if (this.isLikeNew) {
						this.$https.post(this.$api.handleResetNewFlag, {
							operateType: 2
						}).then((res) => {
							if (res.code === 200) {}
						});
					}
					uni.navigateTo({
						url: '/page/myLiked/index'
					});
				} else if (e == 2) {
					if (this.isFansNew) {
						this.$https.post(this.$api.handleResetNewFlag, {
							operateType: 4
						}).then((res) => {
							if (res.code === 200) {}
						});
					}
					uni.navigateTo({
						url: '/page/myFans/index'
					});
				} else if (e == 0) {
					uni.navigateTo({
						url: '/page/wodegongqiu/index'
					});
				}
			},
			gosgangjia() {
				uni.navigateTo({
					url: '/page/market/index'
				});
			},
			getUserInfo() {
				this.userInfo = {};
				this.pubInfoUserInfo = {};
				this.$https.get(this.$api.getInfo, {}).then((res) => {
					if (res.code === 200) {
						store.commit('setUserInfo', res.data.user);
						store.commit('setPubInfoUserInfo', res.data.pubInfoUserInfo);
						// ✅ 通过计算属性访问
						this.isLikeNew = this.pubInfoUserInfo.newFlagLikeCount == '1';
						this.isFansNew = this.pubInfoUserInfo.newFlagFansCount == '1';
					} else {
						console.log(666);
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// });
					}
				});
			},
			update() {
				uni.navigateTo({
					url: '/pages/update/index'
				});
			},
			toVip() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				uni.navigateTo({
					url: '/page/kaitonghuiyuan/index'
				});
			},
			toPage(name) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if ('我的收藏' == name) {
					uni.navigateTo({
						url: '/page/favie/index'
					});
				} else if ('订阅记录' == name) {
					uni.navigateTo({
						url: '/page/huiyuankajuan/index'
					});
				} else if ('分享积分' == name) {
					uni.navigateTo({
						url: '/page/fenxiangjifen/index'
					});
				} else if ('我的关注' == name) {
					uni.navigateTo({
						url: '/page/wodeguanzhu/index'
					});
				} else if ('我的供求' == name) {
					uni.navigateTo({
						url: '/page/wodegongqiu/index'
					});
				} else if ('专属服务管家' == name) {
					this.showGuanjia();
				}
			},
			showGuanjia() {
				this.show = true;
			},
			canle() {
				this.show = false;
			}
		}
	};
</script>
<style scoped lang="scss">
	.my_container {
		background: #ffffff;
		width: 100%;

		.center-btn {
			position: fixed;
			bottom: 40rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -50rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;

			.center-icon {
				width: 124rpx;
				height: 124rpx;
			}
		}

		.center-btn1 {
			position: fixed;
			bottom: 200rpx;
			/* 原生 Tab 高度 + 安全区域 */
			right: -25rpx;
			transform: translateX(-50%);
			z-index: 9999;
			flex-direction: column;
			display: flex;
			align-items: center;
			width: 100rpx;
			height: 120rpx;

			.center-icon {
				width: 150rpx;
				height: 120rpx;
			}

			button {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				background-color: transparent;
			}
		}

		/deep/ .navbar {
			display: flex;
			justify-content: center;
		}

		.my_container_body {
			width: 100%;
			background: #e8fce9;

			.my_container_body_head {
				width: 686rpx;
				height: 194rpx;
			}

			.my_container_view {
				width: 686rpx;
				margin-left: 32rpx;
				height: 108rpx;
				display: flex;

				.my_container_view_left {
					height: 108rpx;
					width: 108rpx;
					border-radius: 100rpx;
				}

				.my_container_view_center {
					width: 466rpx;
					height: 108rpx;
					line-height: 108rpx;
					padding-left: 28rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
				}

				.my_container_view_right {
					width: 112rpx;
					height: 108rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-left: 30rpx;
					}

					view {
						width: 112rpx;
						height: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #494545;
						line-height: 39rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.my_container_title {
				padding: 20rpx;
				display: flex;
				margin-left: 32rpx;
				margin-top: 42rpx;
				width: 686rpx;
				min-height: 128rpx;
				background: #3e3e3e;
				color: #fff;
				border-radius: 24rpx 24rpx 0rpx 0rpx;

				.briefInfo-title {}

				.my_container_title_left {
					width: 80rpx;
					height: 80rpx;
					margin-left: 28rpx;
					margin-top: 24rpx;
					background: #3e3e3e;
					border-radius: 50rpx;
				}

				.my_container_title_center {
					margin-top: 42rpx;
					width: 410rpx;
					height: 44rpx;
					padding-left: 16rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.my_container_title_right {
					display: flex;

					view {
						height: 44rpx;
						width: 112rpx;
						margin-top: 44rpx;
						color: white;
						z-index: 10;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #e4e4e4;
						line-height: 44rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}

					image {
						height: 32rpx;
						width: 32rpx;
						margin-top: 50rpx;
						z-index: 5;
					}
				}
			}

			.my_container_fotter {
				position: relative;
				width: 750rpx;
				height: 800rpx;
				background: #ffffff;
				border-radius: 44rpx 44rpx 0rpx 0rpx;

				.my_container_fotter_head {
					width: 686rpx;
					height: 158rpx;
					margin-left: 32rpx;
					display: flex;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.my_container_fotter_head_item {
						width: 171.5rpx;
						height: 158rpx;
						position: relative;
						text-align: center;

						:nth-child(1) {
							height: 50rpx;
							font-size: 36rpx;
							color: #333333;
							font-weight: 500;
							line-height: 50rpx;
							margin-top: 40rpx;
						}

						:nth-child(2) {
							font-size: 24rpx;
							color: #a3a3a3;
							height: 34rpx;
							font-weight: 400;
							line-height: 34rpx;
						}

						.icon-new {
							width: 100rpx;
							height: 100rpx;
							z-index: 999;
							position: absolute;
							top: -40rpx;
							right: -10rpx;
							display: flex;
							align-items: center;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.my_container_image {
					margin-left: 32rpx;
					width: 686rpx;
					height: 168rpx;
					position: absolute;
					background-image: url('/static/imags/Frame_22.png');
					background-size: cover;
					background-position: center;
					text-align: left;
					font-style: normal;
					text-transform: none;
					display: flex;

					.my_container_image_head {
						display: flex;

						image {
							height: 56rpx;
							width: 68rpx;
							margin-top: 28rpx;
							margin-left: 32rpx;
						}

						.my_container_image_huiyuan {
							width: 200rpx;
							height: 50rpx;
							margin-left: 10rpx;
							margin-top: 32rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: bold;
							font-size: 36rpx;
							color: #d28005;
							line-height: 50rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.my_container_image_bottwn {
						width: 300rpx;
						height: 34rpx;
						margin-top: 20rpx;
						margin-left: 42rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #d28005;
						line-height: 34rpx;
					}

					.my_container_image_button {
						width: 138rpx;
						height: 52rpx;
						background: #eaa640;
						border-radius: 112rpx 112rpx 112rpx 112rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 52rpx;
						margin-top: 58rpx;
						text-align: center;
						margin-right: 42rpx;
						margin-left: 106rpx;
					}
				}
			}

			.my_container_item {
				height: 510rpx;
				margin-top: 226rpx;
				display: flex;
				width: 750rpx;
				display: flex;
				flex-wrap: wrap;

				/* 自动换行 */
				.my_container_item_body {
					margin-left: 109.5rpx;
					height: 174rpx;
					width: 112rpx;
					margin-top: 28rpx;

					image {
						height: 104rpx;
						width: 104rpx;
					}

					view {
						height: 52rpx;
						width: 112rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 39rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.item-name {
						text-align: center;
					}
				}
			}
		}

		.show_pic {
			width: 570rpx;
			height: 790rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-left: 90rpx;
			margin-top: 417rpx;

			.show_head {
				// height: 204rpx;
				display: flex;
				justify-content: center;

				.show_head_o {
					height: 80rpx;
					width: 80rpx;
					margin-top: 86rpx;
					// margin-left: 140rpx;
				}

				.show_head_t {
					margin-left: 20rpx;

					:nth-child(1) {
						// width: 192rpx;
						height: 42rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
						margin-top: 86rpx;
					}

					:nth-child(2) {
						// width: 178rpx;
						height: 40rpx;
						line-height: 39rpx;
					}
				}
			}

			.show_p {
				width: 406rpx;
				height: 406rpx;
				margin-left: 84rpx;
				margin-top: 36rpx;
			}

			.show_footer {
				width: 448rpx;
				height: 80rpx;
				font-weight: 550;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
				margin-left: 62rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>